<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view>
		<view>
			<view class="card_top">
				<view class="search_card flex justify-between">
					<view class="search">
						<uv-search searchIconSize='30' shape="square" height='70rpx' placeholder="请输入订单号/手机号"
							:showAction="false" v-model="keyword">
						</uv-search>
					</view>
					<view class="search_btn" @click="getlist">
						查询订单
					</view>
				</view>
				<view class="tabs">
					<uv-tabs :list="tabListType" :current="current2" @change="change2" keyName="name" lineColor="#e45656" :scrollable="false"></uv-tabs>
					<uv-tabs v-if="orderType != 'due'" @click='tabclick' :current='current' :scrollable = "scrollableOf" lineHeight='6rpx' lineWidth='60rpx' :list="tabList"
						:activeStyle="{color: '#303133',fontWeight: '600',fontSize:'34rpx'}">
					</uv-tabs>
					<uv-tabs v-if="orderType == 'due'" @click='tabclick' :current='current3' :scrollable = "scrollableOf" lineHeight='6rpx' lineWidth='60rpx' :list="tabList2"
						:activeStyle="{color: '#303133',fontWeight: '600',fontSize:'34rpx'}">
					</uv-tabs>
				</view>
			</view>
		</view>

		<view class="" v-if="list.length==0">
			<uv-empty mode="order"></uv-empty>
		</view>
		<view class="pad" v-else>
			<view class="card_item" v-for="(item,i) in list" :key="i">
				<view class="title flex content-center justify-between">
					<view class="left flex content-center">
						<view class="left_num">
							<span v-if="item.orderType == 'desk' || item.orderType == 'due'">{{item.deskNumber}}</span>
							<span v-else>{{item.numberId}}</span>
						</view>
						<view class="left_text" v-if="item.orderType == 'takein'">自取订单</view>
						<view class="left_text" v-if="item.orderType == 'takeout'">外卖订单</view>
						<view class="left_text" v-if="item.orderType == 'desk'">堂食订单</view>
						<view class="left_text" v-if="item.orderType == 'due'">预约订单</view>
					</view>
					<view class="right">
						<text>{{item.statusDto.title}} </text>
					</view>
				</view>

				<view class="content">
					<view class="content_head flex justify-between">
						<view class="left flex content-center">
							<image :src="item.appUserInfoRespVO ? item.appUserInfoRespVO.avatar ? item.appUserInfoRespVO.avatar : '/static/images/mine/default.png' : '/static/images/mine/default.png'" mode="aspectFill"></image>
							<view class="gray">
								{{item.appUserInfoRespVO ? item.appUserInfoRespVO.nickname : '此用户已注销'}}
							</view>
						</view>
						<view class="iconfont-yshop icon-mobile"  @click="makePhoneCall(item.userPhone)" style="font-size: 45rpx;margin-right: 40rpx;"></view>
					</view>
					<view class="content_item">
						<text class="gray">下单时间：</text>{{formatDateTime(item.createTime)}}
					</view>
					<view class="content_item">
						<text class="gray">订单编号：</text>{{item.orderId}}
					</view>

					<view class="content_item flex justify-between  content-center">
						<view class="">
							<text class="gray">订单金额：</text><text class="black">¥{{item.payPrice}}</text>
						</view>
						<view class="" style="padding-top: 16rpx;box-sizing: border-box;" @click="gopage('/pages/components/pages/merchant/orderDetail?id='+item.id)">
							<uv-icon name="arrow-right" size="28rpx"></uv-icon>
						</view>
					</view>
					<view class="content_item" v-if="item.refundStatus > 0">
						<text class="gray">退款原因：</text><text class="orange">{{item.refundReasonWap}}</text>
					</view>

					<view class="shops" style="max-height: 320}" v-if="item.orderType != 'due'">
						<view class="gray">
							商品明细:
						</view>
						<view class="shop flex content-center" v-for="(cart,k) in item.cartInfo" :key="k">
							<image :src="cart.image" mode="aspectFill"></image>
							<view class="shop_item">
								<view class="flex justify-between one">
									<view class="">{{cart.title}}</view>
									<view class="">¥{{cart.price}}</view>
								</view>
								<view class="two">
									{{cart.spec}}
								</view>
								<view class="three">
									×{{cart.number}}
								</view>
							</view>
						</view>
					</view>
					<view class="shops" style="max-height: 320}" v-else>
						<view class="gray">
							预约信息:
						</view>
						<view class="shop flex content-center">
							<image :src="item.appShopDeskVO.image" mode="aspectFill"></image>
							<view class="shop_item">
								<view class="flex justify-between one">
									<view class="">{{item.appShopDeskVO.title}}</view>
									<view class="">¥0.00</view>
								</view>
								<view class="two">
									桌号:{{ item.appShopDeskVO.number }}
								</view>
								<view class="three">
									×1
								</view>
							</view>
						</view>
					</view>
					<view class="content_Bom" v-if="item.dueStatus == 1">
						<view class="jdbtn" @click="cancelDueOrder(item.id)">
							取消预约
						</view>
					</view>
					<view class="content_Bom" v-if="item.statusDto.type == 1">
						<view class="jdbtn" @click="doSend(item.id)">
							出单
						</view>
					</view>
					<view class="content_Bom" v-if="item.statusDto.type == 2">
						<view class="jdbtn" @click="doTake(item.id)">
							后台收货
						</view>
					</view>
					<view class="content_Bom" >
						<view class="jdbtn" @click="refund(item.id)" v-if="item.statusDto.type == -1">
							同意退款
						</view>
					</view>
				</view>
			</view>
		</view>
		<uv-tabbar :value="value" @change="index=>value = index"  activeColor="#09b4f1">
			<uv-tabbar-item text="首页" icon="home" @click="gopage('/pages/components/pages/merchant/index')"></uv-tabbar-item>
			<uv-tabbar-item text="订单" icon="order" @click="gopage('/pages/components/pages/merchant/order')"></uv-tabbar-item>
			<uv-tabbar-item text="桌台" icon="bell" @click="gopage('/pages/components/pages/merchant/bell')"></uv-tabbar-item>
			<uv-tabbar-item text="我的" icon="account" @click="gopage('/pages/components/pages/merchant/my')"></uv-tabbar-item>
			<uv-tabbar-item text="返回" icon="arrow-leftward" @click="gopage2('/pages/index/index')"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
	orderList,
	orderSend,
	orderTake,
	orderRefund
} from '@/api/merchant'
import {
  cancelDue
} from '@/api/order'
import { onShow,onLoad,onReachBottom} from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { formatDateTime } from '@/utils/util'
const main = useMainStore()
const { merchartShop } = storeToRefs(main)
const title = ref('订单列表')
const value = ref(1)
const page = ref(1)
const pageSize = ref(10)
const keyword = ref('')
const orderType = ref('takein')
const scrollableOf = ref(true)
const tabListType = ref([{
			type: 'takein',
			name: '自取',
		}, {
			type: 'takeout',
			name: '外卖',
		}, {
			type: 'desk',
			name: '堂食'
		}, {
			type: 'due',
			name: '预约'
		}]
)
const tabList = ref(
	[{
		type: -1,
		name: '全部',
	}, {
		type: 0,
		name: '待出单',
	}, {
		type: 1,
		name: '待收货',
	}, {
		type: 2,
		name: '已完成'
	}, {
		type: 3,
		name: '待退款'
	}, {
		type: 4,
		name: '待支付'
	}, {
		type: 5,
		name: '已退款'
	}]
)
const tabList2 = ref(
	[{
		type: 1,
		name: '预约中',
	}, {
		type: 2,
		name: '已取消',
	}, {
		type: 3,
		name: '已完成',
	}]
)
const current = ref(0)
const current2 = ref(0)
const current3 = ref(0)
const list = ref([])
const type = ref(-1)
onLoad((e) => {
	if (e.index) {
		if(e.index == 7){
			//current.value = 0
			type.value = 1
			current2.value = 3
			orderType.value = 'due'
			scrollableOf.value = false
		}else{
			current.value = e.index
			type.value = e.index - 1
		}
	}
	list.value = []
	getlist()
})

onReachBottom(() => {
	page.value++
	getlist(true)
})

const makePhoneCall = (mobile) =>{
	// if(!mobile){
	// 	uni.showToast({
	// 		title: '！',
	// 		icon: 'error'
	// 	})
	// }
	uni.makePhoneCall({
		phoneNumber: mobile,
		fail(res) {

		}
	})
}

const cancelDueOrder = async(id) => {
	let data = await cancelDue({id:id});
	if (data) {
		getlist()
	}
}


//出单
const doSend = async(id) => {
	let res = await orderSend({id:id})
	if(res){
		getlist()
	}
}

//收货
const doTake = async(id) => {
	let res = await orderTake({id:id})
	if(res){
		getlist()
	}
}

//退款
const refund = (id) => {
	uni.showModal({
		title: '提示',
		content: '确定要退款？',
		success: async function (res) {
			if (res.confirm) {
				let res1 =  await orderRefund({id:id})
				if(res1){
					getlist()
				}
			} else if (res.cancel) {
		
			}
		}
	});
	
}


const tabclick = (e) => {
	page.value = 1
	type.value = e.type
	keyword .value= ''
	list.value = []
	getlist()
}

const change2 = (e) => {
	orderType.value = e.type
	if(e.type == 'due'){
		scrollableOf.value = false
		//tabList.value = tabList2.value
		type.value = 1
	}else{
		type.value = -1
		scrollableOf.value = true
	}
	getlist()
}
const gopage = (url) =>{
	uni.navigateTo({
		url
	})

}

const gopage2 = (url) =>{
	uni.switchTab({
		url
	}) 

}

const getlist = async(isRefresh = false) => {
	let ordersData = await orderList({shopId:merchartShop.value.id,page:page.value,
	 limit:pageSize.value,type:type.value,key:keyword.value,orderType:orderType.value});
	
	if(ordersData) {
		if(isRefresh){
			if(ordersData.length == 0){
				uni.showToast({
					title: '已经到底啦',
					duration: 2000
				});
				return
			}
			list.value = list.value.concat(ordersData)
			page.value += 1
		}else{
			list.value = ordersData
		}
		
	}
}




	
</script>

<style lang="scss">

	.card_top {
		// height: 200rpx;
		background-color: #fff;
		padding: 0rpx 35rpx 10rpx;
		box-sizing: border-box;

		.search_card {
			margin-bottom: 10rpx;

			.search {
				width: 440rpx;
			}

			.search_btn {
				width: 209rpx;
				height: 70rpx;
				background: #09b4f1;
				border-radius: 10rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}

	.pad {
		margin-top: 3vh;
		padding: 0rpx 26rpx;
		box-sizing: border-box;

		.card_item {
			width: 700rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 20rpx 0;

			.title {
				border-bottom: 1rpx solid #EBEBEB;
				padding: 14rpx 24rpx;
				box-sizing: border-box;

				.left {
					.left_num {
						padding: 2rpx 10rpx;
						box-sizing: border-box;
						background: #09b4f1;
						border-radius: 10rpx;
						font-size: 35rpx;
						font-weight: 500;
						color: #FFFFFF;
						text-align: center;
						line-height: 64rpx;
						margin-right: 20rpx;
					}

					.left_text {
						font-size: 30rpx;
						font-weight: 600;
						color: #333333;
						text-align: center;
						line-height: 64rpx;
					}
				}

				.right {
					font-size: 32rpx;
					color: #FF9C2E;
					line-height: 64rpx;
				}
			}

			.content {
				padding: 24rpx;
				box-sizing: border-box;

				.content_Bom {
					margin: 20rpx 0 0;

					.jdbtn {
						margin: 46rpx auto 0;
						width: 572rpx;
						height: 76rpx;
						background: #09b4f1;
						border-radius: 10rpx;
						text-align: center;
						line-height: 76rpx;
						font-size: 34rpx;
						color: #FFFFFF;
					}

				}

				.content_item {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
					margin: 20rpx 0;
				}

				.orange {
					font-size: 30rpx;
					color: #FF9C2E;
				}

				.gray {
					font-size: 30rpx;
					color: #777777;
				}

				.black {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}

				.content_head {
					.left {
						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}

						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						line-height: 60rpx;
					}
				}

				.shops {

					overflow: hidden;

					.shop {
						margin: 20rpx 0;

						image {
							width: 122rpx;
							height: 120rpx;
							border-radius: 10rpx;
							margin-right: 20rpx;
						}

						.shop_item {
							width: 500rpx;

							.one {
								font-size: 30rpx;
								color: #333333;
							}

							.two {
								font-size: 24rpx;
								color: #777777;
								margin: 6rpx 0;
							}

							.three {
								font-size: 24rpx;
								color: #777777;
							}
						}
					}
				}

			}


		}
	}
</style>